<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>JQuery FormatCurrency Sample</title>
		<script type="text/javascript" src="../external/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="../jquery.formatCurrency-1.3.0.js"></script>
		<script type="text/javascript" src="../i18n/jquery.formatCurrency.all.js"></script>
		<style type="text/css">
			body, div  { margin:0px auto; padding:0px; }

			.main { margin:40px; }
			
			.sample { float:left; margin:10px; padding:4px; border:1px solid #888; width:350px; min-height:100px; }
			
			.sample h3 { margin:-4px; margin-bottom:10px; padding:4px; background:#555; color:#eee; }
			
			.currencyLabel { display:block; }
			
			.code { width:720px; clear:both; }
			
			.code h3 { background:#966; }
			
		</style>
		<script type="text/javascript">
			// Sample 1
			$(document).ready(function()
			{
				$('#currencyButton').click(function()
				{
					$('#currencyField').formatCurrency();
					$('#currencyField').formatCurrency('.currencyLabel');
				});
			});
			
			// Sample 2
			$(document).ready(function()
			{
				$('.currency').blur(function()
				{
					$('.currency').formatCurrency();
				});
			});
		</script>
		
		<link rel="stylesheet" type="text/css" href="csharp.css" > 
		<style type="text/css">
				.csharpcode { font-size:.7em; }
			
		</style>
	</head>
<body>
	<div class="main">
		<div class="formPage">
			<h1>Format Currency Sample</h1>
			
			<div class="sample">
				<h3>Formatting Using Button Click</h3>
				<input type="textbox" id="currencyField" value="$1,220.00" />
				<input type="button" id="currencyButton" value="Convert" />
				
				<div>
					Formatting Currency to an Html Span tag.
					<span class="currencyLabel">$1,220.00</span>
				</div>
			</div>
			
			<div class="sample">
				<h3>Formatting Using Blur (Lost Focus)</h3>
				
				<input type="textbox" id="currencyField" class='currency' value="$1,220.00" />
			</div>
			
			<div class="sample code">
				<h3>Code</h3>
				<!-- code formatted by http://manoli.net/csharpformat/ -->
<!-- code formatted by http://manoli.net/csharpformat/ -->
<pre class="csharpcode">
<span class="kwrd">&lt;!</span><span class="html">DOCTYPE</span> <span class="attr">html</span> <span class="attr">PUBLIC</span> <span class="kwrd">"-//W3C//DTD XHTML 1.0 Transitional//EN"</span>
	<span class="kwrd">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;</span><span class="html">html</span> <span class="attr">xmlns</span><span class="kwrd">="http://www.w3.org/1999/xhtml"</span><span class="kwrd">&gt;</span>
    <span class="kwrd">&lt;</span><span class="html">head</span><span class="kwrd">&gt;</span>
        <span class="kwrd">&lt;</span><span class="html">title</span><span class="kwrd">&gt;</span>JQuery FormatCurrency Sample<span class="kwrd">&lt;/</span><span class="html">title</span><span class="kwrd">&gt;</span>
        <span class="kwrd">&lt;</span><span class="html">script</span> <span class="attr">type</span><span class="kwrd">="text/javascript"</span> <span class="attr">src</span><span class="kwrd">="scripts/jquery-1.2.6.js"</span><span class="kwrd">&gt;&lt;/</span><span class="html">script</span><span class="kwrd">&gt;</span>
        <span class="kwrd">&lt;</span><span class="html">script</span> <span class="attr">type</span><span class="kwrd">="text/javascript"</span> <span class="attr">src</span><span class="kwrd">="scripts/jquery.formatCurrency.js"</span><span class="kwrd">&gt;&lt;/</span><span class="html">script</span><span class="kwrd">&gt;</span>
        <span class="kwrd">&lt;</span><span class="html">style</span> <span class="attr">type</span><span class="kwrd">="text/css"</span><span class="kwrd">&gt;</span>
            body, div  { margin:0px auto; padding:0px; }

            .main { margin:40px; }
            
            .sample { <span class="kwrd">float</span>:left; margin:10px; padding:4px; border:1px solid #888; width:350px; }
            
            .sample h3 { margin:-4px; margin-bottom:10px; padding:4px; background:#555; color:#eee; }
            
            .currencyLabel { display:block; }        
        <span class="kwrd">&lt;/</span><span class="html">style</span><span class="kwrd">&gt;</span>
        <span class="kwrd">&lt;</span><span class="html">script</span> <span class="attr">type</span><span class="kwrd">="text/javascript"</span><span class="kwrd">&gt;</span>
            <span class="rem">// Sample 1</span>
            $(document).ready(<span class="kwrd">function</span>()
            {
                $(<span class="str">'#currencyButton'</span>).click(<span class="kwrd">function</span>()
                {
                    $(<span class="str">'#currencyField'</span>).formatCurrency();
                    $(<span class="str">'#currencyField'</span>).formatCurrency(<span class="str">'.currencyLabel'</span>);
                });
            });
            
            <span class="rem">// Sample 2</span>
            $(document).ready(<span class="kwrd">function</span>()
            {
                $(<span class="str">'.currency'</span>).blur(<span class="kwrd">function</span>()
                {
                    $(<span class="str">'.currency'</span>).formatCurrency();
                });
            });
        <span class="kwrd">&lt;/</span><span class="html">script</span><span class="kwrd">&gt;</span>
    <span class="kwrd">&lt;/</span><span class="html">head</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;</span><span class="html">body</span><span class="kwrd">&gt;</span>
    <span class="kwrd">&lt;</span><span class="html">div</span> <span class="attr">class</span><span class="kwrd">="main"</span><span class="kwrd">&gt;</span>
        <span class="kwrd">&lt;</span><span class="html">div</span> <span class="attr">class</span><span class="kwrd">="formPage"</span><span class="kwrd">&gt;</span>
            <span class="kwrd">&lt;</span><span class="html">h1</span><span class="kwrd">&gt;</span>Format Currency Sample<span class="kwrd">&lt;/</span><span class="html">h1</span><span class="kwrd">&gt;</span>
            
            <span class="kwrd">&lt;</span><span class="html">div</span> <span class="attr">class</span><span class="kwrd">="sample"</span><span class="kwrd">&gt;</span>
                <span class="kwrd">&lt;</span><span class="html">h3</span><span class="kwrd">&gt;</span>Formatting Using Button Click<span class="kwrd">&lt;/</span><span class="html">h3</span><span class="kwrd">&gt;</span>
                <span class="kwrd">&lt;</span><span class="html">input</span> <span class="attr">type</span><span class="kwrd">="textbox"</span> <span class="attr">id</span><span class="kwrd">="currencyField"</span> <span class="attr">value</span><span class="kwrd">="$1,220.00"</span> <span class="kwrd">/&gt;</span>
                <span class="kwrd">&lt;</span><span class="html">input</span> <span class="attr">type</span><span class="kwrd">="button"</span> <span class="attr">id</span><span class="kwrd">="currencyButton"</span> <span class="attr">value</span><span class="kwrd">="Convert"</span> <span class="kwrd">/&gt;</span>
                
                <span class="kwrd">&lt;</span><span class="html">div</span><span class="kwrd">&gt;</span>
                    Formatting Currency to an Html Span tag.
                    <span class="kwrd">&lt;</span><span class="html">span</span> <span class="attr">class</span><span class="kwrd">="currencyLabel"</span><span class="kwrd">&gt;</span>$1,220.00<span class="kwrd">&lt;/</span><span class="html">span</span><span class="kwrd">&gt;</span>
                <span class="kwrd">&lt;/</span><span class="html">div</span><span class="kwrd">&gt;</span>
            <span class="kwrd">&lt;/</span><span class="html">div</span><span class="kwrd">&gt;</span>
            
            <span class="kwrd">&lt;</span><span class="html">div</span> <span class="attr">class</span><span class="kwrd">="sample"</span><span class="kwrd">&gt;</span>
                <span class="kwrd">&lt;</span><span class="html">h3</span><span class="kwrd">&gt;</span>Formatting Using Blur (Lost Focus)<span class="kwrd">&lt;/</span><span class="html">h3</span><span class="kwrd">&gt;</span>
                
                <span class="kwrd">&lt;</span><span class="html">input</span> <span class="attr">type</span><span class="kwrd">="textbox"</span> <span class="attr">id</span><span class="kwrd">="currencyField"</span> <span class="attr">class</span><span class="kwrd">='currency'</span> <span class="attr">value</span><span class="kwrd">="$1,220.00"</span> <span class="kwrd">/&gt;</span>
            <span class="kwrd">&lt;/</span><span class="html">div</span><span class="kwrd">&gt;</span>
            
        <span class="kwrd">&lt;/</span><span class="html">div</span><span class="kwrd">&gt;</span>
    <span class="kwrd">&lt;/</span><span class="html">div</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;/</span><span class="html">body</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;/</span><span class="html">html</span><span class="kwrd">&gt;</span></pre>
			</div>
			
		</div>
	</div>
</body>
</html>